<template>
	<view class="container">
		<insert-btn :isShow="isShow" @insert="handleShowFrom"></insert-btn>
		<view class="content"  v-show="!isShow">
			<view class="family-wrapper">
				<view class="family-item">
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								员工姓名
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="familyInfoArgs.name"
							/>
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								退休证号
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="number"
								v-model="familyInfoArgs.retireNo"
							/>
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								社保卡号
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="number"
								v-model="familyInfoArgs.socialNo"
							/>
						</view>
					</view>
					
					<view
						class="staff-item"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">开始日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.startDate" 
								@change="event => handleDateChange(event,'start')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.startDate}}</view>
							</picker>
							
						</view>
					</view>
					
					
					
					<view
						class="staff-item"
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">结束日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.endDate" 
								@change="event => handleDateChange(event,'end')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.endDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								劳务内容
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="familyInfoArgs.work"
							/>
						</view>
					</view>
					
					<view class="staff-item">
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								劳务地点
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box"  
								type="text"
								v-model="familyInfoArgs.address"
							/>
						</view>
					</view>
					
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								劳动报酬支付方式
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								placeholder="(一)、(四)"
								placeholder-class="place-holder-s"
								disabled
								v-model="familyInfoArgs.reward_pay"
							/>
						</view>
					</view>
					
					<view
						class="staff-item" 
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text ">
								每月劳务费
							</text>
						</view>
						<view class="staff-inp">
							<input 
								class="inp-box disabled"  
								type="number"
								placeholder="2360"
								placeholder-class="place-holder-s"
								disabled
								v-model="familyInfoArgs.salary"
							/>
						</view>
					</view>
					
					
					<view
						class="staff-item"
						
					>
						<view class="staff-item-title">
							<text class="dot">*</text>
							<text class="title-text">签署日期</text>
						</view>
						<view class="staff-inp">
							<uni-icons
								type="wallet" 
								size="22"
								color="#676767"
								class="company-icons"
							>
							</uni-icons>
							
							<picker 
								mode="date" 
								:value="familyInfoArgs.signDate" 
								@change="event => handleDateChange(event,'sign')"
								class="company-wrapper"
							>
								<view class="company-name">{{familyInfoArgs.signDate}}</view>
							</picker>
							
						</view>
					</view>
					
					<view class="submit-btn-wrapper">
						<view class="submit-btn-inner">
							<view 
								class="submit-btn submit-btn-confirm"
								hover-class="click-btn-confirm"
								@click="handleconfirm"
							>
								确定
							</view>
							<view 
								class="submit-btn"
								hover-class="click-btn"
								@click="handleCancel"
							>
								取消
							</view>
						</view>
					</view>
					
					
					
					
				</view>
			</view>
		</view>
		<view class="btn-box-wrapper" v-show="isShow">
			<view class="btn-box" hover-class="click-btn" @click="handleAddContract">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name:"retire",
		props: {
			retireData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				isShow: !0,
				familyInfoArgs: {
					name: '',
					retireNo: '',
					socialNo: '',
					startDate: '',
					endDate: '',
					work: '',
					address: '',
					signDate: '',
					salary: '',
					reward_pay: ''
				}
			};
		},
		watch: {
			retireData (newVal) {
				if (newVal.id) {
					
					
					let d = {
						staff_id: this.userInfo.staff_id,
						contract_status: 2,
						id: newVal.id,
						name: newVal.sname,
						retireNo: newVal.retire_number,
						socialNo: newVal.social_security,
						startDate: newVal.contract_type.start_date,
						endDate: newVal.contract_type.end_date,
						work: newVal.job_description,
						address: newVal.work_place,
						signDate: newVal.sign_date,
						salary: newVal.salary,
						reward_pay: newVal.reward_pay
					}	
					this.familyInfoArgs = d
				}
			}
		},
		computed: {
			...mapGetters(
				[
				 "userInfo"
				]
			)
		},
		methods: {
			handleShowFrom (val) {
				this.isShow = val
			},
			handleconfirm () {
				this.isShow = true
			},
			handleCancel () {
				
				this.isShow = true
			},
			handleDateChange (e,t) {
				let d = JSON.parse(JSON.stringify(this.familyInfoArgs))
				switch (t) {
					case 'start':
						d.startDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'end':
						d.endDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'alway':
						d.alwayDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'task':
						d.taskDate = e.detail.value
						this.familyInfoArgs = d
						return 
					case 'sign':
						d.signDate = e.detail.value
						this.familyInfoArgs = d
						return 
					dafault:
						return
				}
			},
			async handleAddContract () {
				if (!this.$route.query.staff_id) {
					if (!this.userInfo.staff_id) return this.$utils.showToast('请先添加入职信息')
				}
				if (!this.handleVerified()) return 
				let staff_id = ''
				if (this.$route.query.staff_id) {
					staff_id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id){
					staff_id = this.userInfo.staff_id
				}
				let params = {
					staff_id: staff_id,
					contract_status: 2,
					sname: this.familyInfoArgs.name,
					retire_number: this.familyInfoArgs.retireNo,
					social_security: this.familyInfoArgs.socialNo,
					start_date: this.familyInfoArgs.startDate,
					end_date: this.familyInfoArgs.endDate,
					job_description: this.familyInfoArgs.work,
					work_place: this.familyInfoArgs.address,
					sign_date: this.familyInfoArgs.signDate,
					salary: this.familyInfoArgs.salary,
					reward_pay: this.familyInfoArgs.reward_pay
				}
				if (this.familyInfoArgs.id) {
					params.id = this.familyInfoArgs.id
				}
				try {
					await this.$api.handleAddContract(params)
					this.$utils.showToast('提交成功')
				} catch (e) {
					console.log('comeponent laborContract(handleAddContract) error ->',e)
				}
			},
			handleVerified () {
				if (!this.familyInfoArgs.name) {
					this.$utils.showToast('输入姓名')
					return false
				}
				if (!this.familyInfoArgs.retireNo) {
					this.$utils.showToast('输入退休证号')
					return false
				}
				if (!this.familyInfoArgs.socialNo) {
					this.$utils.showToast('输入社保卡号')
					return false
				}
				if (!this.familyInfoArgs.startDate) {
					this.$utils.showToast('选择开始日期')
					return false
				}
				if (!this.familyInfoArgs.endDate) {
					this.$utils.showToast('选择结束日期')
					return false
				}
				if (!this.familyInfoArgs.work) {
					this.$utils.showToast('输入劳务内容')
					return false
				}
				if (!this.familyInfoArgs.address) {
					this.$utils.showToast('输入劳务地点')
					return false
				}
				if (!this.familyInfoArgs.signDate) {
					this.$utils.showToast('选择签署日期')
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding-bottom: 50rpx;
	box-sizing: border-box;
	.btn-box-wrapper {
		width: 100%;
		position: fixed;
		bottom: 200rpx;
		left: 0;
		.btn-box {
			line-height: 80rpx;
			width: 200rpx;
			background: #005AFF;
			border-radius: 3rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			position: absolute;
			left: 50%;
			margin-left: -75rpx;
		}
		.click-btn {
			background: #2c6adb;
		}
	}
	.family-wrapper {
		.family-item {
			margin-bottom: 40rpx;
			.header {
				line-height: 50rpx;
				background: #D9D9D9;
				padding: 0 50rpx;
				font-size: 30rpx;
				color: #979797;
			}
			.staff-item {
				padding: 0 50rpx;
				box-sizing: border-box;
				.hide {
					opacity: 0;
					visibility:hidden;
				}
				.staff-item-title{
					font-size: 30rpx;
					padding: 26rpx 0;
					.dot {
						color:#FF0000
					}
					.title-text {
						color: #676767;
					}
				}
				.upload-bg {
					background: #ECECEC;
					border: none !important;
					font-size: 30rpx;
					color: #646464 !important;
					justify-content: center;
					
				}
				.staff-inp {
					width: 100%;
					height: 70rpx;
					border-radius: 3rpx;
					border: 1rpx solid #D3D3D3;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					.bottom-icons {
						position: absolute;
						right: 20rpx;
						z-index: -1;
					}
					.company-icons {
						margin: 0 20rpx;
					}
					.company-wrapper {
						width: 100%;
						.company-name {
							width: 100%;
							height: 50rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							color: #676767;
						}
						.company-name-tip {
							@extend .company-name;
							color: #979797;
							
						}
					}
					.inp-box {
						width: 100%;
						height: 70rpx;
						font-size: 30rpx;
						color: #676767;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
					.place-holder-s {
						line-height: 70rpx;	
					}
					.disabled {
						background: #ECECEC;
					}
					.card-btn {
						width: 250rpx;
						line-height: 70rpx;
						background: #2D83FE;
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}
					.btn-click {
						background: #739cd7;
					}
					
				}
			}
		}
	}
	
	.add-wrapper {
		padding: 50rpx 50rpx;
		.add-inner {
			background: #EDEDED;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.insert-btn-inner {
				display: flex;
				align-items: center;
				.insert-btn-text {
					font-size: 30rpx;
					color: #8C8C8C;
				}
			}
		}
		.click-btn {
			background: #d5cdcd;
		}
	}
	.submit-btn-wrapper {
		margin-top: 80rpx;
		.submit-btn-inner {
			display: flex;
			align-items: center;
			justify-content: center;
			.submit-btn {
				line-height: 80rpx;
				width: 200rpx;
				background: #C2C2C2;
				border-radius: 3rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
			}
			.submit-btn-confirm {
				background: #005AFF;
				margin-right: 50rpx;
			}
			.click-btn-confirm {
				background: #2c6adb;
			}
			.click-btn {
				background: #a39e9e;
			}
		}
	}
}
</style>